var mainCanvasConstructor = function(){

	var _this = this;
	this.canvas;
	
	var   _width
		, _height
	;
	
	function _init(n){
		
		_setCanvasDimension();
	
		var newCanvas = $('<canvas>');
		newCanvas
			.attr({
				id: 'new-canvas-' + n,
				width: _width,
				height: _height
				
			})
			.addClass('canvas');
			
		
		$('#canvasWrapper').append(newCanvas);
		_this.canvas = new fabric.Canvas( 'new-canvas-' + n );		
		_observeCanvas();
	}
	
	function _setCanvasDimension(){
	
		var availableHeight = $('#canvasWrapper').parent().height() - $('#canvasWrapper').siblings().outerHeight(true);
		var availableWidth = $('#canvasWrapper').width();
		
		//margenes del canvas
		var margin = (availableWidth - (availableHeight/deviceController.ratio)) / 2;

		if (margin >= 0){
			margin += 10;	
		}
		else {
			margin = 10;
		}
		
		_width = availableWidth - margin*2;
		_height = _width * deviceController.ratio;
		
		deviceController.setCanvasRatio(_width);
	}
	
	function _observeCanvas(){
		
		_this.canvas.observe({ 
			'object:moving': function(){
				sliderController.updateControls();
			},
		  
			'object:scaling': function(){
				sliderController.updateControls();
			},
		  
			'object:resizing': function(){
				sliderController.updateControls();
			},
		  
			'object:selected' : function(){
				sliderController.enableAll();
				sliderController.updateControls();
				if(_this.canvas.getActiveGroup() == null){
					leftTree.treeView.select(leftTree.treeView.findByUid(_this.canvas.getActiveObject().node[0].dataset.uid));
					timeline.ShowTimelineButton();
					batchNodeController.select(true);
				}
				
			},
	
			'before:selection:cleared' : function(){
				sliderController.numericInputBlur();
				sliderController.disableAll(); 
				leftTree.unselectAllNodes();
				timeline.Hide();
				batchNodeController.select(false);
			}
		});		
	}
		
	function _addLocalImage(url,f_callback, p_settings){
		
		var oImg;
		fabric.Image.fromURL(url,function(img) {
			
			var settings = {
				  left: 200 * deviceController.canvasRatio
				, top: 200 * deviceController.canvasRatio
			}
			
			$.extend(settings, p_settings)
			
			//Escalar el objeto en relación al ratio del canvas
			oImg = img.set(settings).scale(deviceController.canvasRatio);
			_this.canvas.add(oImg).renderAll(); 
		
			if (f_callback && typeof f_callback === "function") f_callback(oImg);			  
		});
		
	}
	
	function _addText(p_text, p_settings, f_callback){
		
		var textObj = new fabric.Text(p_text, p_settings);
		_this.canvas.add(textObj).renderAll(); 
		
		if (f_callback && typeof f_callback === "function") f_callback(textObj);
	}
	

	this.init = _init;
	this.addLocalImage = _addLocalImage;
	this.addText = _addText;
	
	return this;
}